<template style="display: flex; align-items: center; justify-items: center">
  <div>
    <!--  登录-->
    <div style="display: flex; align-items: center; justify-items: center" v-show="windowType === 'login'">
      <el-container style="display: flex; justify-content: center;align-items: center;flex-direction: column">
        <el-header style="display: flex; align-items: center; justify-items: center">
          <i class="iconfont iconyoudaoyunbiji" style="margin-right: 5px;font-size: 24px"></i>
          <span>欢迎使用盗亦有道云笔记</span>
        </el-header>
        <el-main>
          <el-form :model="loginForm" ref="loginForm" :rules="loginRules">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" v-model="loginForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :plain="true" @click="login('loginForm')" native-type="submit">登录</el-button>
              <el-button @click="goto('register')">注册</el-button>
              <el-button type="text" @click="goto('edit')">修改密码</el-button>
              <el-button type="text" @click="this.willOpen">忘记密码</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
    <!--  注册-->
    <div style="display: flex; align-items: center; justify-items: center" v-show="windowType === 'register'">
      <el-container style="display: flex; justify-content: center;align-items: center;flex-direction: column">
        <el-header style="display: flex; align-items: center; justify-items: center">
          <i class="iconfont iconyoudaoyunbiji" style="margin-right: 5px;font-size: 24px"></i>
          <span>欢迎加入盗亦有道云笔记</span>
        </el-header>
        <el-main>
          <el-form :model="registerForm" ref="registerForm" :rules="registerRules">
            <el-form-item prop="username">
              <el-input placeholder="请输入用户名" v-model="registerForm.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input placeholder="请输入密码" v-model="registerForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item prop="confirm">
              <el-input placeholder="请确认密码" v-model="registerForm.confirm" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="register" native-type="submit">注册</el-button>
              <el-button @click="goto('login')">返回</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </div>
    <!--  修改密码-->
    <div style="display: flex; align-items: center; justify-items: center" v-show="windowType === 'edit'">
      <el-container style="display: flex; justify-content: center;align-items: center;flex-direction: column">
        <el-header style="display: flex; align-items: center; justify-items: center">
          <i class="iconfont iconyoudaoyunbiji" style="margin-right: 5px;font-size: 24px"></i>
          <span>欢迎使用盗亦有道云笔记</span>
        </el-header>
        <el-main>
          <el-form :model="resetForm" ref="resetForm" :rules="resetRules">
            <el-form-item prop="password">
              <el-input placeholder="请输入原密码" v-model="resetForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item prop="newPassword">
              <el-input placeholder="请输入新密码" v-model="resetForm.newPassword" show-password></el-input>
            </el-form-item>
            <el-form-item prop="confirm">
              <el-input placeholder="请确认新密码" v-model="resetForm.confirm" show-password></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer>
          <el-button type="primary" plain @click="editPassword" native-type="submit">修改</el-button>
          <el-button @click="goto('login')">返回</el-button>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
  export default {
    name: "LoginRegister",
    props: {
      host: undefined
    },
    data() {
      let validatePasswordAndUsername = (rule, value, callback) => {
        if (value === '')
          callback(new Error("不得为空"));
        else {
          if (!value.match('^[\\w]{6,16}$'))
            callback(new Error("仅由数字字母下划线组成，长度为6~16"));
          else
            callback();
        }
      };
      let registerConfirm = (rule, value, callback) => {
        if (value !== this.registerForm.password)
          callback(new Error("两次密码不一致"));
        else
          callback();
      };
      let resetConfirm = (rule, value, callback) => {
        if (value !== this.resetForm.newPassword)
          callback(new Error("两次密码不一致"));
        else
          callback();
      };
      return {
        loginForm: {
          username: "",
          password: "",
        },
        registerForm: {
          username: "",
          password: "",
          confirm: ""
        },
        resetForm: {
          password: "",
          newPassword: "",
          confirm: ""
        },
        loginRules: {
          username: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "用户名不得为空"
          }],
          password: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "密码不得为空"
          }]
        },
        registerRules: {
          username: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "用户名不得为空"
          }],
          password: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "密码不得为空"
          }],
          confirm: [{validator: registerConfirm, trigger: 'blur'}, {
            required: true,
            message: "密码不得为空"
          }]
        },
        resetRules: {
          password: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "原密码不得为空"
          }],
          newPassword: [{validator: validatePasswordAndUsername, trigger: 'blur'}, {
            required: true,
            message: "密码不得为空"
          }],
          confirm: [{validator: resetConfirm, trigger: 'blur'}, {
            required: true,
            message: "密码不得为空"
          }]
        },
        windowType: "login"
      }
    },
    methods: {

      /**
       * 修改密码
       */
      editPassword() {
        console.log(this.resetForm);
        this.apis.editPassword(this.resetForm.password, this.resetForm.newPassword, this.showMessage)
      },

      goto(modelName) {
        this.windowType = modelName;
      },

      showMessage(text, typeOfMessage) {
        this.$message({
          message: text,
          type: typeOfMessage
        });
      },

      login() {
        this.$refs['loginForm'].validate(
          valid => {
            if (valid)
              this.apis.login(this.loginForm.username, this.loginForm.password, res => {
                this.showMessage(res);
                this.host.updateFileTree();
                this.clean();
              });
          }
        );
      },
      register() {
        this.$refs['registerForm'].validate(
          valid => {
            if (valid)
              this.apis.register(this.registerForm.username, this.registerForm.password, res => this.showMessage(res, 'success'));
          }
        );
      },

      /**
       * 清空密码
       */
      clean() {
        this.loginForm.username = this.loginForm.password = "";
        this.resetForm.password = this.resetForm.newPassword = this.resetForm.confirm = "";
        this.registerForm.username = this.registerForm.password = this.registerForm.confirm = "";
      }
    }
  }
</script>

<style scoped>
</style>
